<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>note</title>
    <style>
        body {padding: 40px;}

        #top {
            padding: 0;
            width: 100%;
            height: 50px;
            border-bottom: 1px solid #ddd;
            top: 0;
            left: 0;
            position: fixed;
            z-index: 100;
            background-color: white;
        }

        .me {
            float: left;
            margin-top: 10px;
            margin-left: 50px;
        }

        .me a {
            color: #99b2ff;
            text-decoration: none;
            background: transparent;
            font-size: 18px;
        }

        .time {
            float: right;
            margin-top: 13px;
            margin-right: 100px;
        }

        #left {
            width: 22%;
            height: 100%;
            position: fixed;
            top: 51px;
            left: 0;
            overflow: hidden;
            background: #fff;
            z-index: 100;
            padding: 18px;
            border: 1px solid #ddd;
            border-top: none;
            border-bottom: none;
        }

        #menu {
            width: 22%;
            height: 100%;
            position: fixed;
            overflow: hidden;
            z-index: 100;
            border-top: none;
            border-bottom: none;
        }

        #menu:hover {
            overflow: auto;
        }

        #menu li {
            padding-left: 12px;
            padding-top: 6px;
        }

        #menu a {
            color: #4183c4;
            text-decoration: none;
            background: transparent;
            font-size: 14px;
        }

        #sidebar {
            width: 22%;
            height: 100%;
            position: fixed;
            overflow: hidden;
            z-index: 100;
            border-top: none;
            border-bottom: none;
        }

        #sidebar:hover {
            overflow: auto;
        }

        #menu h1 {
            font-size: 16px;
        }

        #sidebar h1 {
            font-size: 16px;
        }

        #custom-toc-container {
            padding-left: 0;
        }

        #test-markdown-view {
            padding-left: 25%;
            padding-top: 50px;
            margin: 0;
            width: 75%;
            background-color: transparent;
        }

        #dateTime {
            font-size: 16px;
            color: #2B81AF;
            margin-right: 80px;
        }

        @keyframes my-face {
            from{
                transform: translateX(0px);
            }
            to{
                transform: translateX(calc(-50% - 30px ));
            }
        }

        .my-face {
            animation: my-face 5s infinite ease-in-out;
            /* Safari 与 Chrome */
            -webkit-animation: my-face 5s infinite ease-in-out;
            display: inline-block;
            margin: 0 5px;
        }
</style>
    <link rel="stylesheet" href="vue/element-ui-index.css"/>
    <link rel="stylesheet" href="editormd/css/editormd.preview.css"/>
</head>
<body>
<div id="app">
    <div id="top">
        <div class="me"><a href="/biji">笔 记</a></div>
        <div class="me"><a href="/tools">开发工具</a></div>
        <div class="me"><a href="/collect">网址收藏</a></div>
        <div class="time">
            <span id="dateTime"></span>
            <span class="my-face">ღゝ◡╹)ノ♡</span>
        </div>
    </div>
    <div>
    <div id="left">
        <el-tabs v-model="activeName" >
            <el-tab-pane label="文件" name="first">
                <div id="menu">
                    <li th:each="filename: ${filenames}">
                        <a th:href="@{/biji?name={filename}(filename=${filename})}" th:text="${filename}"></a>
                    </li>
                </div>
            </el-tab-pane>
            <el-tab-pane label="大纲" name="second">
                <div id="sidebar">
                    <div class="markdown-body editormd-preview-container" id="custom-toc-container"></div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
    <div id="test-markdown-view">
        <textarea style="display:none;" th:text="${content}"></textarea>
    </div>
    </div>
</div>
<!--背景-->
<script type="text/javascript" src="/back/xiantiao.min.js"></script>
<script src="jquery/jquery1.11.3.min.js"></script>
<script src="vue/vue.js"></script>
<script src="vue/element-ui-index.js"></script>
<script src="editormd/editormd.js"></script>
<script src="editormd/lib/marked.min.js"></script>
<script src="editormd/lib/prettify.min.js"></script>
<script type="text/javascript">
    Date.prototype.format = function (fmt) {
        var o = {
            "y+": this.getFullYear, //年
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds() //秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    };

    var app = new Vue({
        el: '#app',
        data: {
            activeName: 'first',
        },
        created: function () {
            var mdView = editormd.markdownToHTML("test-markdown-view", {
                // 自定义 ToC 容器层
                tocContainer    : "#custom-toc-container",
            });
            // 显示时间
            setInterval("document.getElementById('dateTime').innerHTML = (new Date()).format('yyyy-MM-dd hh:mm:ss');", 1000);
        },
        methods: {
        }
    });
</script>
</body>
</html>